<template>
    <div class="rootMain">
        <el-form label-position="right" label-width="100px">
            <el-form-item label="违约本金">
                <el-input v-model="oldTax"></el-input>
            </el-form-item>
            <el-form-item label="起算日期">
                <el-date-picker
                    v-model="startDate"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="截止日期">
                <el-date-picker
                    v-model="endDate"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="利率计算方式">
                <el-select
                    v-model="index"
                    placeholder="请选择"
                    @change="PickerChange"
                >
                    <el-option
                        v-for="(item, index) in picker"
                        :key="index"
                        :label="item.name"
                        :value="index"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="约定利率(%)">
                <el-input v-model="appointTax"></el-input>
            </el-form-item>
        </el-form>

        <div class="but">
            <el-button @click="resetBtn">重置</el-button>
            <el-button type="primary" @click="countBtn">计算</el-button>
        </div>

        <div v-if="resultShow" class="result">
            <el-descriptions title="计算结果：" :column="1">
                <el-descriptions-item label="逾期期限(天)">
                    {{ overdueDays }}
                </el-descriptions-item>
                <el-descriptions-item label="违约金(元)">{{
                    taxcount
                }}</el-descriptions-item>
            </el-descriptions>
            <div class="qumaohao">
                <el-descriptions title="计算公式： " :column="1">
                    <el-descriptions-item
                        label="违约金=违约本金 x 逾期期限 x 利率"
                    >
                    </el-descriptions-item>
                    <el-descriptions-item
                        label="利率换算：年利率= 12 x 月利率 = 360 x 日利率"
                    >
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
    </div>
</template>

<script>
import moment from "moment";
export default {
    name: "deditCount",
    props: {
        item: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    data() {
        return {
            index: "",
            picker: [
                {
                    type: 0,
                    name: "日利率",
                },
                {
                    type: 1,
                    name: "月利率",
                },
                {
                    type: 2,
                    name: "年利率",
                },
            ],
            oldTax: "",
            startDate: new Date(),
            endDate: new Date(),
            newTax: 0,
            taxcount: 0,
            taxPercent: "",
            appointTax: "",

            overdueDays: 0,
            resultShow: false,
        };
    },
    watch: {},
    created() {},
    mounted() {},
    computed: {},
    methods: {
        PickerChange(e) {
            console.log(e);
        },

        //重置
        resetBtn() {
            this.resultShow = false;
            this.oldTax = "";
            this.index = "";
            this.appointTax = "";
        },

        //计算
        countBtn() {
            if (this.oldTax == "") {
                this.$message({
                    message: "请填写违约本金",
                    type: "warning",
                });
                return;
            }
            if (this.index === "") {
                console.log(this.index);
                this.$message({
                    message: "请选择利率计算方式",
                    type: "warning",
                });
                return;
            }
            if (this.appointTax == "") {
                this.$message({
                    message: "请填写约定利率",
                    type: "warning",
                });
                return;
            }
            const days = moment(this.endDate).diff(
                moment(this.startDate),
                "days"
            );
            this.overdueDays = moment(this.endDate).diff(
                moment(this.startDate),
                "days"
            );
            const a = this.appointTax / 100;
            if (this.index == 0) {
                this.taxcount = (this.oldTax * days * a).toFixed(2);
            } else if (this.index == 1) {
                this.taxcount = ((this.oldTax * days * a * 12) / 360).toFixed(
                    2
                );
            } else if (this.index == 2) {
                this.taxcount = ((this.oldTax * days * a) / 360).toFixed(2);
            }
            this.resultShow = true;
        },
    },
};
</script>

<style lang="scss" scoped>
.rootMain {
    padding: 20px 22px;
}

.qumaohao {
    ::v-deep .el-descriptions-item__label.has-colon::after {
        content: "";
    }
}

.result {
    padding-top: 25px;
}
</style>
